<template>
  <!-- 背景视频区域 -->
  <!-- :style="{ height: props.videoContainerHeight }" -->
  <div class="video-container" ref="videoRef">
    <!-- 遮罩层 -->
    <div :style="fixStyle" class="filter"></div>
    <!-- 背景视频区域 -->
    <video
      style="position: absolute"
      :style="fixStyle"
      preload="auto"
      autoplay
      loop
      v-on:canplay="canplay"
      muted
    >
      <source :src="props.videoLink" type="video/mp4" />
      浏览器不支持 video 标签，建议升级浏览器。
      <!-- <source src="PATH_TO_WEBM" type="video/webm" /> -->
      浏览器不支持 video 标签，建议升级浏览器。
    </video>

    <!-- 视频不能播放就展示图片 -->
    <div class="poster hidden" v-if="!videoCanPlay">
      <!-- <img :style="fixStyle" src="PATH_TO_JPEG" alt="" /> -->
    </div>

    <!-- 内容区域 -->
    <slot name="content"></slot>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue"
import type { IVideoBgcContainer } from "./type"

const props = defineProps<IVideoBgcContainer>()

// 背景视频
let fixStyle = ref({})
const videoCanPlay = ref(false)

function canplay() {
  videoCanPlay.value = true
}

let videoRef = ref()

// 屏幕resize的节流标识
let resizeTimeout: number
//   /* 背景视频 */
const elementToObserve = document.body // 或者替换为要观察大小变化的其他元素
const resizeObserver = new ResizeObserver((entries) => {
  clearTimeout(resizeTimeout)

  resizeTimeout = setTimeout(() => {
    for (const entry of entries) {
      const windowWidth = entry.contentRect.width
      // console.log(windowWidth)

      const windowHeight = entry.contentRect.height
      // console.log(windowHeight)

      /* 设置视频要显示的高度 */
      if (props.videoContainerHeight < 1) {
        videoRef.value.style.height = props.videoContainerHeight * windowHeight + "px"
      }

      const windowAspectRatio = windowHeight / windowWidth
      let videoWidth
      let videoHeight

      if (windowAspectRatio < 0.5625) {
        videoWidth = windowWidth
        videoHeight = videoWidth * 0.5625
        fixStyle.value = {
          position: "absolute",
          height: windowWidth * 0.5625 + "px",
          width: windowWidth + "px",
          "margin-bottom": (windowHeight - videoHeight) / 2 + "px",
          "margin-left": "initial"
        }
      } else {
        videoHeight = windowHeight
        videoWidth = videoHeight / 0.5625
        fixStyle.value = {
          position: "absolute",
          height: windowHeight + "px",
          width: windowHeight / 0.5625 + "px",
          "margin-left": (windowWidth - videoWidth) / 2 + "px",
          "margin-bottom": "initial"
        }
      }
    }
  }, 300)
})

onMounted(() => {
  /* 设置视频要显示的高度 */
  // 挂载的时候就设置，避免后面监听到变化再设置导致页面跳动
  videoRef.value.style.height = props.videoContainerHeight * window.innerHeight + "px"

  // 监听背景视频
  resizeObserver.observe(elementToObserve)
})

onUnmounted(() => {
  // 清除resizeObserver监听
  resizeObserver.unobserve(elementToObserve)

  // 清除可能存在的setTimeout
  clearTimeout(resizeTimeout)
})
</script>

<style lang="less" scoped>
.video-container {
  // height: 100vh;
  position: relative;
  // overflow: hidden;
}

.video-container .poster img,
.video-container video {
  z-index: 0;
  position: absolute;
}

.video-container .filter {
  z-index: 1;
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
}
</style>
